<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <title>v-model</title>
</head>
<body>
    <div id="ap"> 
        <!-- 输入框 -->
        <p>输入框的信息是</p>
        <input v-model="message" placeholder="编辑我...">
        <p>{{message}}</p>
        <!-- 添加一个修饰符 lazy ，从而转变为在 change 事件中同步 -->
        <input v-model.lazy="messa" placeholder="编辑我...">
        <!-- 如果想自动将用户的输入值转为 Number 类型（如果原值的转换结果为 NaN 则返回原值） -->
        <input v-model.number="age" type="number">
        <!-- 自动过滤用户输入的首尾空格 -->
        <input v-model.trim="msg">
        
<br/>
        <!-- 单选框的话是逻辑值 -->
        <input type="checkbox" id="checkbox" v-model="radio">
        <label for="checkbox">{{radio}}</label>
        <p id="name"></p>

        <!-- 多选框的话用一个数组表示 -->
        <input type="checkbox" id="taobao" value="taobao" v-model="dianshang">
        <label for="taobao">taobao</label>
        <input type="checkbox" id="tianmao" value="tianmao" v-model="dianshang">
        <label for="tianmao">tianmao</label>
        <input type="checkbox" id="jingdong" value="jingdong" v-model="dianshang">
        <label for="jingdong">jingdong</label>
        <p>选择的值是：{{dianshang}}</p>
    </div>
</body>
<script>
    // v-model 指令在表单控件元素上创建双向数据绑定
    // 会根据控件类型自动选取正确的方法来更新元素
    var ap =new Vue({
        el:'#ap',
        data:{
            message:"Hello",
            radio:false,
            dianshang:[]
        }
    })
    ap.$watch('radio',function(value){
        document.getElementById("name").innerHTML=value
    })  
</script>
</html>